<template>
  <div class="ai-dialog">
    <el-dialog v-model="visible" :show-close="false" width="300px">
      <!-- 对话框内容 -->
      <template #header="{ close }">
        <div class="my-header">
          <div class="header-top">
            <img src="../../../assets/imgs/ai/ai_logo.png" alt="AI Logo">
            <span>有问题，找京言</span>
            <el-button class="close-btn" type="danger" text @click="close">
              <h2>×</h2>
            </el-button>
          </div>
          <div class="header-desc">
            <h3>Hi!</h3>
            我是京言，你的专属AI购物助手，我可以为你解答各种购物问题，提供实用信息。有问题问京言~
          </div>
          <div class="waterflow-container">
            <div class="tag-item" v-for="(item, index) in items" :key="index">
              {{ item.text }}
            </div>

          </div>
          <div class="icons">
            <div class="icons">
              <div class="group">
                <div class="icons-group">
                  <i :class="['iconfont', item.icon]" v-for="(item, index) in icons" :key="index"></i>
                </div>
                <span class="ai-generated-text">内容由AI生成</span>
              </div>
            </div>

          </div>
        </div>
      </template>
      <!-- 对话框内容 -->
      <div class="ai-talk">

        <div class="input-area">
          <div class="editable-div" contenteditable="true" placeholder="请输入你的问题" @paste="handlePaste"></div>
          <div class="group">
            <img src="../../../assets/imgs/ai/ai_talk.png" alt="ai">
            <img src="../../../assets/imgs/ai/ai_send.png" alt="发送" class="send-icon" @click="handleSend">
          </div>

        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { computed, defineProps, defineEmits } from 'vue'

const items = [
  { text: '办公室必备好物' },
  { text: '帮我挑空调' },
  { text: '夏日防晒神器' },
  { text: '送长辈礼物' },
]
// 图表
const icons = [
  { icon: 'icon-jiazai' },
  { icon: 'icon-aixin' },
  { icon: 'icon-a-44tubiao-08' },
]
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue'])

const visible = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})
const handlePaste = (e) => {
  // 处理图片粘贴
  const items = (e.clipboardData || window.clipboardData).items;
  for (let index in items) {
    const item = items[index];
    if (item.kind === 'file' && item.type.match('^image/')) {
      const blob = item.getAsFile();
      const reader = new FileReader();
      reader.onload = (event) => {
        const img = document.createElement('img');
        img.src = event.target.result;
        img.style.maxWidth = '100%';
        document.querySelector('.editable-div').appendChild(img);
      };
      reader.readAsDataURL(blob);
    }
  }
};
</script>

<style lang="scss" scoped>
.ai-dialog {

  .my-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;

    .header-top {
      display: flex;
      align-items: center;
      gap: 10px;
      position: relative;

      img {
        width: 37px;
        height: 30px;
      }

      span {
        font-size: 18px;
        color: rgb(174, 176, 180);
      }

      .close-btn {
        position: absolute;
        right: 0;
        padding: 0;
        min-width: auto;
        border: none;

        h2 {
          margin: 0;
          font-size: 20px;
        }
      }
    }

    .header-desc {
      color: rgb(27, 22, 25);
      font-size: 14.85px;
      line-height: 1.5;

      h3 {
        margin: 28px 0 12px 0;
        font-size: 16px;
        color: rgb(255, 87, 127);
        font-weight: 700;
      }
    }

    .waterflow-container {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 8px;

      .tag-item {
        background-color: #f7f8fc;
        border-radius: 4px;
        padding: 4px 12px;
        font-size: 12px;
        color: #333;
        white-space: nowrap;
      }

    }

    .icons {
      .group {
        display: flex;
        justify-content: space-between;
        /* 两端对齐 */
        align-items: center;
        /* 垂直居中 */
        width: 100%;

        .icons-group {
          display: flex;
          gap: 12px;
          /* 图标间距 */

          i {
            color: rgb(179, 181, 188);
            font-size: 16px;
            /* 调整图标大小 */
          }
        }

        .ai-generated-text {
          color: #999;
          font-size: 12px;
          white-space: nowrap;
          /* 防止文字换行 */
        }
      }
    }
  }

  .ai-talk {
    .input-area {
      display: flex;
      gap: 8px;
      align-items: center;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      padding: 8px;
      border: none;
    }

    .editable-div {
      flex: 1;
      min-height: 80px;
      max-height: 120px;
      overflow-y: auto;

      &[placeholder]:empty:before {
        content: attr(placeholder);
        color: #c0c4cc;
      }
    }

    .group {
      display: flex;
      width:100%;
      justify-content: space-between;
      img {
        width: 24px;
        height: 24px;
        cursor: pointer;
      }
    }


  }
}
</style>
